<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<script src="js/jquery-1.11.1.js"></script>
		<style>
			.imga{
				animation: dfc .8s linear infinite;
			}
			.imgb{
				animation: dfc1 .8s linear infinite ;
			}
			@keyframes dfc{
				            0%{
				                transform: rotate(0deg);
				            }
				            30%{
				                transform: rotate(120deg);
				            }
				            60%{
				                transform: rotate(240deg);
				            }
				            100%{
				                transform: rotate(360deg);
				            }
			}
			@keyframes dfc1{
				            0%{
				                transform: rotateY(0deg);
				            }
				            30%{
				                transform: rotateY(120deg);
				            }
				            60%{
				                transform: rotateY(240deg);
				            }
				            100%{
				                transform: rotateY(360deg);
				            }
			}
		</style>
	</head>
	<body>
		<img src="img/xixi.png" alt="1" />
		<audio src="img/TICKING-AWAY(2023walolant).mp3" autoplay></audio>
		<button id="btn1">开始</button>
		<button id="btn2">暂停</button>
		<button id="btn3">翻转</button>
		<script>
			// jq 页面图片改变 旋转
			$("#btn1").click(function(){
				$("img").attr("src","img/dfc.jpg").addClass("imga");
			});
			$("#btn2").click(function(){
				$("img").attr("src","img/dfc.jpg").removeClass("imga");
				$("audio").attr("src","TICKING-AWAY(2023walolant).mp3");
			});
			$("#btn3").click(function(){
				$("img").attr("src","img/dfc.jpg").toggleClass("imgb");
			});
			
		</script>
	</body>
</html>